<!-- 这是购物车的组件 -->
<template>
  <div :class="{kongkong:isShowBTn}">
    <!--购车空空如野按钮-->
    <van-button type="danger" v-if="isShowBTn" class="kong" @click="goBuy">空空如野，去逛逛</van-button>
    <!--购物车列表下拉刷新-->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <van-swipe-cell :key="item.id" v-for="(item) in goodsList" :before-close="beforeClose" :name="JSON.stringify(item)">
        <van-card
          :thumb="item.thumb_path">
          <template #title>
            {{item.title}}
          </template>
          <template #price>
            {{'￥'+item.sell_price}}
          </template>
          <template #num>
            {{'x'+item.cou}}
          </template>
          <template #footer>
            <van-stepper disable-input @change="getNum" @plus="showPlus" @minus="showMinus" v-model="item.cou" :name="JSON.stringify(item)"></van-stepper>
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </van-pull-refresh>
    <!--底部提交订单-->
    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      :decimal-length="2"
    />
  </div>
</template>

<script>
// 按需导入mapState函数，将所需数据映射为计算属性使用
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      // 是否显示'空空如野'按钮
      isShowBTn: false,
      // 下拉刷新的'正在加载'标志
      isLoading: false,
      // 购物车列表数据(从服务器获取)
      goodsList: [],
      // 定义获取购物车列表数据时的参数id数组
      ids: [],
      // 定义订单总价
      totalPrice: 0,
      // 定义加减号标识符
      flag: ''
    }
  },
  created () {
    // 页面一加载，就从localStorage中获取数据  赋值给car
    this.saveInCar()
    // 页面一加载，就获取购物车列表数据
    this.getGoodsList()
  },
  methods: {
    ...mapMutations(['saveInCar', 'getCartCount']),
    // 点击'空空如也', 去商品列表页看看
    goBuy () {
      this.$router.push('/goodslist')
    },
    // 当刷新列表的时候
    onRefresh () {
      // 页面一加载，就获取购物车列表最新数据
      this.getGoodsList()
      this.$toast('刷新成功')
      this.isLoading = false
    },
    // 发送请求 获取购物车列表数据
    async getGoodsList () {
      // 每次发送请求前  将  定义获取购物车列表数据时的参数id数组  置空
      this.ids = []
      // 获取localStorage中存储的数据(从共享数据car获取数据也可以)
      const arr = this.car
      // 遍历数组
      arr.forEach(item => {
        // 将数组中每个对象的id存储到参数id数组中
        this.ids.push(item.id)
      })
      console.log(this.ids)
      // 如果用户有加入购物车的商品 才发送请求
      if (this.ids.length > 0) {
        // 发送请求 获取服务器的数据
        const { data: res } = await this.$http.get('/api/goods/getshopcarlist/' + this.ids.join(','))
        if (res.status !== 0) return this.$toast('获取购物车页面数据失败')
        // 从服务器获取的数据中的cou属性的值是假数据，需要修改成真实的购物车商品的数量
        // 遍历数组
        res.message.forEach((item, i) => {
          const obj = arr.filter(v => {
            if (item.id === v.id) return true
          })
          if (obj.length > 0) {
            item.cou = obj[0].count
          }
        })
        // 将数据存储到goodsList中
        this.goodsList = res.message
        // 计算商品总价
        this.getGoodsTotalPrice(this.goodsList)
      } else {
        // 显示'空空如野'按钮
        this.isShowBTn = true
        // 给goodsList赋值[]
        this.goodsList = []
      }
    },
    // 计算商品总价
    getGoodsTotalPrice (list) {
      let total = 0
      list.forEach(item => {
        total += item.cou * item.sell_price
      })
      this.totalPrice = total * 100
    },
    // 点击加减按钮时 获取输入框的值
    getNum (val, detail) {
      const goodsInfo = JSON.parse(detail.name)
      // 获取localStorage中存储的最新数据
      const arr = JSON.parse(window.localStorage.getItem('car'))
      arr.filter(item => {
        if (item.id === goodsInfo.id) {
          if (this.flag === '+') {
            item.count++
          } else {
            item.count--
          }
        }
        return true
      })
      // 重新存储到localStorage中
      window.localStorage.setItem('car', JSON.stringify(arr))
      // 更新car
      this.saveInCar()
      console.log(this.goodsList)
      // 计算商品总价
      this.getGoodsTotalPrice(this.goodsList)

      // 重新获取购物车商品的数量
      this.getCartCount()
    },
    showPlus () {
      this.flag = '+'
    },
    showMinus () {
      this.flag = '-'
    },
    // 当左滑点击删除时
    beforeClose ({ name, position, instance }) {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          // 关闭左滑
          instance.close()
          break
        case 'right':
          this.$dialog.confirm({
            message: '确定删除吗？'
          }).then((d) => {
            const obj = JSON.parse(name)
            // 根据id从localStorage中删除对应的数据
            let arr = JSON.parse(window.localStorage.getItem('car'))
            arr = arr.filter(item => {
              return item.id !== obj.id
            })
            // 将arr存储到localStorage中
            window.localStorage.setItem('car', JSON.stringify(arr))
            // 更新到car中
            this.saveInCar()
            // 重新获取购物车列表数据
            this.getGoodsList()

            // 重新获取购物车商品的数量
            this.getCartCount()
          }).catch(err => {
            // 收起单元格侧边栏
            instance.close()
            return err
          })
          break
      }
    }
  },
  // 计算属性
  computed: {
    ...mapState(['car'])
  }
}
</script>

<style scoped>
.kongkong {
  width: 100%;
  height: 100%;
  background: url('../assets/kong.jpg') no-repeat center;
  background-size: cover;
}
.kong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}
.van-swipe-cell {
  margin: 10px 0;
}
.van-card__content {
  flex-direction: column;
  justify-content: flex-start;
}
.van-card {
  background-color: #fafafa;
}
.van-card__price {
  color: red;
  font-weight: 500;
}
.goods-card {
  margin: 0;
  background-color: @white;
}

.delete-button {
  height: 100%;
}
.van-hairline--top-bottom {
  display: none !important;
  visibility: none;
}
.van-pull-refresh {
  margin-top: 40px;
}
</style>
